<template>
  <div id="app">
     
    <div class="title">我的电影</div>
    
   
    <span
      ><select class="select" @click="reloads">
        <option>全部频道</option>
        <option>创意</option>
        <option>励志</option>
        <option>搞笑</option>
        <option>运动</option>
        <option>旅行</option>
        <option>爱情</option>
        <option>广告</option>
        <option>动画</option>
        <option>剧情</option>
        <option>音乐</option>
        <option>科幻</option>
        <option>记录</option>
        <option>预告</option>
        <option>混剪</option>
        <option>生活</option>
        <option>实验</option>
        <option>时尚</option>
        <option>汽车</option>
        <option>游戏</option>
        <option>美食</option>

      </select></span>
   <router-view/>
   
    <div id="nav">
      <router-link to="/">发现</router-link>
      <router-link to="/Video">频道</router-link>
      <router-link to="/My">我的</router-link>
    </div>
  </div>
</template>

<script>
export default {
  
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      currentMusic: "",
      show: false,
      citylist: [],
      isRouterAlive: true,
      select: false,
    };
  },
  methods: {
    reload() {
      if (this.select == true) {
        this.isRouterAlive = false;
        this.$nextTick( ()=> {
          this.isRouterAlive = true;
        });
        this.select = !this.select;
      } else{
        this.select = !this.select;
      }
    },
    reloads() {
      setTimeout(this.reload());
    },
  },
  created() {

    this.getCitys();
  },
};
</script>

<style lang="less">
 *{
      padding: 0;
      margin: 0;
    }
  .title {
    background-color: #dd001b;
    font-size: 24px;
    width: 100%;
    margin-bottom: 5px;
    text-align: center;
  }
  .select {
  width: 500px;
}
#nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    background: #fff;
    border-top: 0.5px solid #d8d8d8;
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    justify-content: space-around;

  a {
    font-weight: bold;
    color: gray;
    text-decoration: none;

    &.router-link-exact-active {
      color: red;
      border-bottom: 2px solid #dd001b;
    }
  }
}
</style>
